﻿@model Jerrysjunglehuts.Models.BookingViewModel
@{
    ViewBag.Title = "Booking Room";
}
<script>
    $(document).ready(function () {
        var id = "";
        $("li a").click(function (event) {
            sessionStorage.clear();
            sessionStorage.setItem("TariffSelectedId", this.id);
        });
        $('.TariffNavigation li').removeClass();
        id = sessionStorage.getItem("TariffSelectedId");
        $(('#' + id)).parent().addClass('active');                
    });
</script>

<div class="row">
    <!-- left column start -->
    <div class="col-md-8">
        <h1>@ViewBag.Title</h1>
        <p>
            To book your experience of a lifetime, you can write to us on <a href="mailto:guestcare@jerrysjunglehuts.com">
                guestcare@jerrysjunglehuts.com</a>.
        </p>
        <p>
            We would respond to your query maximum within two business days
            I want to book JJH for (Please click the appropriate choice).
        </p>

        @Html.Hidden("l_CheckInDate", Model.s_checkInDate)
        @Html.Hidden("l_checkoutDate", Model.s_checkoutDate)
        @Html.Hidden("l_RoomType", Model.RoomType)
        @Html.Hidden("l_noOfAdults", Model.noOfAdults)
        @Html.Hidden("l_noOfChildren", Model.noOfChildren)

        <form id="bookingFinal" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="emailID">Email address</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="emailID" required>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Full Name</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="fullName" required>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="telMobile">Contact #</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="telMobile" required>
                </div>

            </div>
            <div class="form-group">                
                <label class="col-sm-3 control-label">Select Tariff</label>
                <div class="col-sm-9">
                    <select id="selectTariff" class="form-control" required>
                        <option value="">-- Select --</option>
                        <option value="1">Rate per Night</option>
                        <option value="2">Package</option>
                        <option value="3">Resort to Yourselves</option>
                        <option value="4">Long Stay</option>
                        <option value="5">Kandbari Hills - Rate Per Night</option>
                        <option value="6">Kandbari Hills - Yourselves</option> 
                        <option value="7">Kandbari Hills - Long Stay</option> 
                    </select>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" >Gender</label>
                <div class="col-sm-9">
                    <select id="gender" class="form-control" required>
                        <option value="">-- Select --</option>
                        <option value="1">Male</option>
                        <option value="2">Female</option>
                    </select>
                </div>

            </div>                      
            <div class="form-group">
                <label class="col-sm-3 control-label" for="mealPreference">Meal Preference</label>
                <div class="col-sm-9">
                    <select id="mealPreference" class="form-control" required>
                        <option value="">-- Select --</option>
                        <option>Vegetarian</option>
                        <option>Non-vegetarian</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="roomType">Type of Room</label>
                <div class="col-sm-9">
                    <select id="roomType" class="form-control" required>
                        <option value="">-- Select --</option>
                        <option>Standard</option>
                        <option>Superior</option>
                        <option>Resort to Yourselves</option>
                        <option>Cottage</option>
                        <option>Long Stay</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="requirementRooms">Requirement of Rooms</label>
                <div class="col-sm-9">
                    <select id="requirementRooms" class="form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="adutls">Adults</label>
                <div class="col-sm-9">
                    <select id="adutls" class="form-control" required>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="children">Children</label>
                <div class="col-sm-9">
                    <select id="children" class="form-control">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="CheckInDate">Check-in Date</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="CheckInDate" required>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="CheckOutDate">Check-out Date</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="CheckOutDate" required>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="comingFrom">Coming From</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="comingFrom">
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="specialRequest">Special Request</label>
                <div class="col-sm-9">
                    <textarea id="specialpRequest" class="form-control" ></textarea>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label hidden-xs">&nbsp;</label>
                <div class="col-sm-9">
                    @*<button id="bookingFinal" data-toggle="modal"
                    type="button" class="btn btn-primary">
                    Submit</button>*@
                    <input type="submit" value="submit" class="btn btn-primary">
                </div>
            </div>
        </form>
    </div>
    <!-- left column end -->
    <!-- right column start -->
    <div class="col-md-4">
        @Html.Partial("_PartialTariffMenu", new { Action = "TariffMenu", ReturnUrl = ViewBag.ReturnUrl
        })
        @Html.Partial("_PartialAmenities")
    </div>
    <!-- right column end -->
</div>

<!-- room booking confirmation popup window start -->
<!-- Small modal -->

<div id="bookingroom" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
    aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Booking Confirmation</h4>
            </div>
            <div class="modal-body">
                Thanks for your submission! A mail confirming receipt of your booking/query is sent
                to your registered mail id. 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-close btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function fillValues() {       
        var roomTypeVal = $("#l_RoomType").val();
        var CheckInDate = $("#l_CheckInDate").val();
        var CheckOutDate = $("#l_checkoutDate").val();
        var noOfAdults = $("#l_noOfAdults").val();
        var noOfChildren = $("#l_noOfChildren").val();        
        $("#roomType").val(roomTypeVal);
        $("#CheckInDate").val(CheckInDate);
        $("#CheckOutDate").val(CheckOutDate);
        $("#adutls").val(noOfAdults);
        $("#children").val(noOfChildren);
    }
    $(document).ready(function () {
        $("#bookingFinal").validate({
            debug: true,
            rules: {
                selectTariff: { required: true },
                gender: { required: true },
                fullName: { required: true },
                telMobile: { required: true },
                emailID: { required: true },
            },
            submitHandler: function () {                
                submit();
                return false;
            },
            invalidHandler: function () {window.scrollTo(0,0)}
        });

        var dateToday = new Date();
        var dates = $("#CheckInDate, #CheckOutDate").datepicker({
            dateFormat: "dd/mm/yy",
            minDate: dateToday,
            onSelect: function (selectedDate) {
                var option = this.id == "CheckInDate" ? "minDate" : "maxDate",
                    instance = $(this).data("datepicker"),
                    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
        fillValues();
        $(".btn-close").click(function (e) {           
            location.href = "/Home/Index";
        });
    });
    // $("#bookingFinal").click(function (e) {   

    function submit() {        
            var ob = new Object();
            ob.tariff = $("#selectTariff :selected").text();
            ob.gender = $("#gender :selected").text();
            ob.fullName = $("#fullName").val();
            ob.telMobile = $("#telMobile").val();
            ob.emailID = $("#emailID").val();
            ob.MealPreference = $("#mealPreference :selected").val();
            ob.RoomType = $("#roomType :selected").val();
            ob.requirementRooms = $("#requirementRooms :selected").val();
            ob.noOfAdults = $("#adutls :selected").val();
            ob.noOfChildren = $("#children :selected").val();
            ob.s_checkInDate = $("#CheckInDate").val();
            ob.s_checkoutDate = $("#CheckOutDate").val();
            ob.comingFrom = $("#comingFrom").val();
            ob.specialpRequest = $("#specialpRequest").val();
            var param = { 'ob': ob };           
            //$('input[type="submit"]').attr('disabled', 'disabled');
            $.ajax({
                type: 'POST',
                contentType: "application/json",
                data: JSON.stringify(param),
                cache: false,
                url: '@Url.Action("SendMail", "Tariff")',
                success: function (data) {
                    if (data != null) {
                        if (data.indexOf("success") != -1) {                       
                            $("#bookingroom").modal('show');
                            return false;
                        }
                    }
                    else {
                        alert("Error in Booking");
                    }                   
                }
            });      
        }
  //  });
</script>
